<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .point{position:absolute;border-radius:50%;}
    input{position: relative;z-index: 1;}
    .pos{position: absolute;bottom: 20px;left:20px;z-index: 1;}
  </style>
</head>
<body>
  <input type="button" value="+" class="add">
  <input type="button" value="-" class="reduce">
  <input type="color" class="color">
  <span class="pos"></span>
</body>
<script>

  var pos = document.querySelector(".pos");

  document.onmousemove = function(eve){
    var e = eve || window.event;
    // 创建元素
    var div = document.createElement("div");
    // 设置样式
    div.className = "point";
    div.style.left = e.pageX + "px";
    div.style.top = e.pageY + "px";
    div.style.width = w + "px";
    div.style.height = h + "px";
    div.style.background = c;
    // 插入页面
    document.body.appendChild(div);
    // 将坐标放入指定容器
    pos.innerHTML = e.pageX + ", " + e.pageY;
  }

  var add = document.querySelector(".add");
  var reduce = document.querySelector(".reduce");
  var color = document.querySelector(".color");

  // 初始宽高
  var w=10, h=10;
  // 初始颜色
  var c = "red";

  // +按钮的功能
  add.onclick = function(){
    w += 5;
    h += 5;
  }
  // -按钮的功能
  reduce.onclick = function(){
    if(w <= 5){
      w = 5;
      h = 5;
    }else{
      w -= 5;
      h -= 5;
    }
  }
  // 色板的颜色值被改变时的功能
  color.onchange = function(){
    c = color.value;
  }


  
</script>
</html>